<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!--条件选择-->
        <el-row :gutter="10">
            <el-col :span='2'>
                <el-select size="small" 
                v-model='table.deptId' @change='deptChange'
                placeholder="请选择部门" clearable>
                    <el-option v-for='item in table.depts' :key='item.deptId' :label='item.name' :value='item.deptId'></el-option>
                </el-select>
            </el-col>
            <el-col :span='4'>
                <el-input size='small' placeholder="请输入用户名" suffix-icon="el-icon-search" v-model="table.queryKey" @keyup.enter.native="getTableData"></el-input>
            </el-col>
        </el-row>
        <!--表格-->
        <el-row class="bone-top-10">
            <el-table :data='table.tableData' border stripe 
            :highlight-current-row="true" ref="multipleTable"
            style='width:100%;' size='small'>
                <el-table-column width="80" label="编号" prop='memberId'></el-table-column>
                <el-table-column label="用户名" prop='username'></el-table-column>
                <el-table-column label="部门" prop='deptName'></el-table-column>
                <el-table-column label="姓名" prop='empName'></el-table-column>
                <el-table-column label="角色" prop='roles' show-overflow-tooltip>
                    <template slot-scope='scope'>
                        <span v-for='item in scope.row.roles' :key='item.roleId'>
                            {{item.roleName}} 
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="是否可用" prop='usable'>
                    <template slot-scope='scope'>
                        <span style="font-size:20px;">
                            <i v-if='scope.row.usable==1' class="el-icon-check"></i>
                            <i v-else class="el-icon-close"></i>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop='createTime'></el-table-column>
                <el-table-column label="上次登录" prop='lastLoginTime'></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope='scope'>
                        <el-button type="text" @click="modifyMember(scope.row)">设置  </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' @current-change="handleCurrentChange" :current-page="this.table.currentPage" :page-size="this.table.pageSize" layout="total, prev, pager, next, jumper" :total="this.table.rowCount"></el-pagination>
        </el-row>

        <!--修改弹出框-->
        <el-dialog title="设置" :visible.sync="form.dialogVisible"
        width='25%'>
            <div>
                <el-form :model="form" size='small' label-width="80px" label-position="right">
                    <el-form-item label="是否可用">
                        <el-switch v-model="form.usable"
                        active-text='可用' inactive-text='禁用'
                        :active-value='1' :inactive-value='0'
                        ></el-switch>
                    </el-form-item>
                     <el-form-item label="角色选择">
                        <el-select v-model="form.roleIdList" multiple placeholder="请选择角色">
                            <el-option v-for='rItem in form.roles' :key='rItem.roleId'
                            :label="rItem.name" :value="rItem.roleId"></el-option>
                        </el-select>
                    </el-form-item> 
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="form.dialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="saveMember">确定</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
import Http from '@/components/utils/httpUtil'
export default {
  data(){
      return {
            form:{
                isShow: false,
                roles: [],
                dialogVisible: false,
                roleIdList: [],
                usable: '',
                memberId: ''
            },
            table: {
                tableData: [],
                queryKey: '',
                deptId: '',
                depts: [],
                pageSize: 10,
                currentPage: 1,
                rowCount: 0
            },

      }
  },
  methods: {
    //获取表格数据
    getTableData(){
        let p = {};
        p.start = (this.table.currentPage-1)*this.table.pageSize
        p.num = this.table.pageSize
        p.key = this.table.queryKey
        p.deptId = this.table.deptId
        Http.fetch('/member/listQuery',p)
        .then(res=>{
            this.table.tableData = res.data.rows;
            this.table.rowCount = res.data.total;
        })
    },
    //table翻页
    handleCurrentChange(val){
        this.table.currentPage = val;
        this.getTableData();
    },

    //获取下拉选择数据
    getSelectData(){
        let url = '/dept/listTree';
        let p = {};
        Http.fetch(url,p)
        .then(res=>{
            this.table.depts = res.data;
        })
    },
    //下拉选择切换
    deptChange(){
        this.getTableData();
    },

    //打开修改设置
    modifyMember(row){
        this.form.dialogVisible = true
        this.form.usable = row.usable
        let roleTemp = row.roles.map(role=>{
            return role.roleId;
        })
        this.form.roleIdList = roleTemp;
        this.form.memberId = row.memberId
    },
    //保存修改设置
    saveMember(){
        let p = {};
        p.memberId = this.form.memberId
        p.roleIdList = this.form.roleIdList
        p.usable = this.form.usable
        Http.fetch('/member/modify',p)
        .then(res=>{
            this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
            });
            this.form.dialogVisible = false
            this.getTableData()
        })
        .catch(err=>{
            this.$message({
                showClose: true,
                message: err.errMsg,
                type: "error"
            });
        })
    },

    //获取所有的角色
    getRolesData(){
        let url = '/role/listAll'
        let p = {}
        Http.fetch(url,p)
        .then(res=>{
            this.form.roles = res.data
        })
    }
  },
  mounted(){
    this.getTableData()
    this.getSelectData()
    this.getRolesData()
  }
}
</script>

<style scoped>

</style>
